<template>
  <div class="td-patient-delection-select-test-item">
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">单一选择</mt-tab-item>
      <mt-tab-item id="2">套餐选择</mt-tab-item>
    </mt-navbar>

    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <test-item v-if="selected==='1'"></test-item>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <test-item-package v-if="selected==='2'"></test-item-package>
      </mt-tab-container-item>
    </mt-tab-container>

    <div class="footer">
      <mt-header :title="`小计：${parseFloat($store.state.item.total).toFixed(2)}`">
        <router-link to="tdPatientDelection" slot="left">
          <mt-button>上一步</mt-button>
        </router-link>
        <mt-button slot="right" @click="btnOrder();">下一步</mt-button>
      </mt-header>
    </div>
  </div>
</template>

<script>
import TianDingPatientDelectionTestItemComponent from "../testItem";
import TianDingPatientDelectionTestItemPackageComponent from "../testItemPackage";
import Enumerable from "linq";
import { mapActions } from "vuex";
export default {
  name: "TianDingPatientDelectionSelectTestItemComponent",
  components: {
    "test-item": TianDingPatientDelectionTestItemComponent,
    "test-item-package": TianDingPatientDelectionTestItemPackageComponent
  },
  data() {
    return {
      selected: "1"
    };
  },
  methods: {
    btnOrder() {
      if (this.$store.state.item.testItemList.length === 0) {
        this.toast$(`至少选择一项`);
        return;
      }

      let itemIDs = Enumerable.from(this.$store.state.item.testItemList)
        .select(e => e.value)
        .toArray();

      console.log(itemIDs);
      
      this.itemIDsAction(itemIDs);

      this.$router.push({ name: "tdPatientDelectionOverview" });
    },
    ...mapActions(["itemIDsAction"])
  }
};
</script>
